import React, { Component} from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入折线图
import  'echarts/lib/chart/pie';
import "echarts/lib/component/title"; // 此处是按需引入
import 'echarts/lib/component/grid'
import "echarts/lib/component/tooltip";
import ReactEcharts from "echarts-for-react";
export default class PieEcharts extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {          
            yData: [
                { value: 10, name: '活期' },
                { value: 20, name: '7天' },
                { value: 30, name: '25天' },
                { value: 30, name: '1年' },
                { value: 10, name: '2年' }
            ]
        }
    }
    // getOption 这个函数主要用于配置 option，包括将数据配置进去
    // 也可以将其放在 state 中，然后通过 setState 更新
    getOption = () => {
        const {yData} = this.state;
        return{
            title: {
                text: "新增金额",
                x: 'center',
            },
            tooltip: {
                trigger: "item",
                formatter: "{a}：{b}<br/>金额： {c} <br/>占比：{d}%",
            },
            //图例
            legend: {
                orient: 'vertical', //图例方向
                itemHeight: 10,     //图例高度
                itemWidth: 10,      //图例宽度
                top: '5%',
                right:1
            },
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            series: [
                {
                    name: '产品期限',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    data:yData
                }
            ]
        }
    };
    render() {
        return (
            <ReactEcharts
                style={{ minHeight: "400px",width:600,height:400}}
                option={this.getOption()}
                notMerge
                lazyUpdate
                theme={"theme_name"}
                // onChartReady={this.onChartReadyCallback}
                // onEvents={EventsDict}
            />
        )
    }
}